<template>
  <div class="update-email-over">
    <div v-if="loading" class="loading">
      <a-spin tip="邮箱绑定中..." />
    </div>
    <div v-else>
      <div class="emailover-main">
        <div class="img-box">
          <i v-if="isSuccess" class="iconfont icon-check-double-line success"></i>
          <i v-else class="iconfont icon-close-line failed"></i>
        </div>
        <div class="title center-title">{{ isSuccess ? '换绑邮箱成功' : '换绑邮箱失败' }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { personalApi } from '@/services/api'
  const route = useRoute()

  const loading = ref<boolean>(true)
  const isSuccess = ref<boolean>(false)

  onMounted(async () => {
    loading.value = true
    const params = route.query
    try {
      await personalApi.editEmail(params)
      message.success('绑定成功')
      isSuccess.value = true
    } catch (error) {
      isSuccess.value = false
    }
    loading.value = false
  })
</script>

<style lang="less" scoped>
  @import '@/views/login/styles/index.less';

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
  }

  .iconfont {
    font-size: 100px;
  }

  .success {
    color: @success;
  }

  .failed {
    color: @danger;
  }

  .update-email-over {
    width: 100%;
    height: 100%;

    .close-module {
      position: relative;
      padding: 24px;
      box-sizing: border-box;
      flex-direction: row;
      .fc();
    }

    .emailover-main {
      padding-top: 200px;
      .fc();
      flex-direction: column;

      .img-box {
        position: relative;
      }

      .center-title {
        margin-top: 48px;
        margin-bottom: 16px;
        text-align: center;
        .font24b();
      }

      .text-center {
        margin-top: 24px;
      }
    }
  }
</style>
